<template>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="true" :close-on-press-escape="true">
        <!-- 表单部分 -->
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px" class="${lowerClassName}Form">

            <#if addOrUpdateColumns??>
                <#list addOrUpdateColumns as column>

                    <#if column.hasDict == true >
                        <#if column.showType == '单选框'>
            <el-form-item prop="${column.lowerColumnName}" label="${column.fieldRemark}" size="mini">
                <ren-radio-group size="mini" v-model="dataForm.${column.lowerColumnName}"  paramType="2" paramCode="${column.dictType}" placeholder="${column.fieldRemark}" ></ren-radio-group>
            </el-form-item>
                            <#else>
            <el-form-item  prop="${column.lowerColumnName}" label="${column.fieldRemark}" >
                <ren-select size="mini" v-model="dataForm.${column.lowerColumnName}"  paramType="2" paramCode="${column.dictType}" placeholder="${column.fieldRemark}" ></ren-select>
            </el-form-item>
                        </#if>
                        <#else>

                        <#if column.hasD == true >
            <el-form-item prop="${column.lowerColumnName}" label="${column.fieldRemark}">
                <el-date-picker
                        size="mini"
                        v-model="dataForm.${column.lowerColumnName}"
                        type="${column.fieldType}"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择${column.fieldRemark}"
                        >
                </el-date-picker>
            </el-form-item>
                            <#else>

                            <#if column.showType == '文本框' >
            <el-form-item prop="${column.lowerColumnName}" label="${column.fieldRemark}">
                <el-input v-model="dataForm.${column.lowerColumnName}" placeholder="${column.fieldRemark}" size="mini"></el-input>
            </el-form-item>
                                <#elseif column.showType == '计数器'>
                                    <el-form-item prop="${column.lowerColumnName}" label="${column.fieldRemark}">
                                        <el-input-number v-model="dataForm.${column.lowerColumnName}"  label="${column.fieldRemark}" size="mini"></el-input-number>  <!-- 精度 :precision="2" -->
                                    </el-form-item>
                                <#elseif column.showType == '文本域'>
                                    <el-form-item prop="${column.lowerColumnName}" label="${column.fieldRemark}">
                                        <el-input type="textarea" :rows="2" placeholder="请输入${column.fieldRemark}" v-model="dataForm.${column.lowerColumnName}"></el-input>
                                    </el-form-item>
                            </#if>

                        </#if>

                    </#if>

                </#list>
            </#if>


        </el-form>
        <!-- 表单提交相关按钮 -->
        <template slot="footer">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import debounce from 'lodash/debounce'
    export default {
        data () {
            return {
                visible: false,
                dataForm: {
                    ${pkLowerColName}: ''
                    <#if addOrUpdateColumns??>
                        <#list addOrUpdateColumns as column>
                    ,${column.lowerColumnName}:''
                        </#list>
                    </#if>
                }
            }
        },
        components: {
        },
        computed: {
            dataRule () {
                return {
                    <#if addColumns??>
                        <#list addColumns as column>
                    ${column.lowerColumnName}: [
                        { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                    ],
                        </#list>
                    </#if>
                }
            }
        },
        methods: {
            init () {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.id) {
                        this.getInfo()
                    }
                })
            },
            changeCron (val) {
                this.dataForm.cronExpression = val
            },
            // 获取信息
            getInfo () {
                var p = { params: { id: this.dataForm.id } }
                this.$http.get(`/pc/${lowerClassName}/get`,p).then(({ data: res }) => {
                    if (res.code !== 200) {
                        return this.$message.error(res.msg)
                    }
                    this.dataForm = res.data
                }).catch(() => {})
            },
            // 表单提交
            dataFormSubmitHandle: debounce(function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }

                    var u = !this.dataForm.id ? '/pc/${lowerClassName}/add' : '/pc/${lowerClassName}/modify'

                    this.$http['post'](u, this.dataForm).then(({ data: res }) => {
                        if (res.code !== 200) {
                            return this.$message.error(res.msg)
                        }
                        this.$message({
                            message: this.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }).catch(() => {})
                })
            }, 1000, { 'leading': true, 'trailing': false })
        }
    }
</script>

<style lang="scss">
    .${lowerClassName}Form label {
        line-height: 28px
    }
</style>
